<template>
  <div class="school_infs">
    <Card>
      <p slot="title">
        <Icon type="navicon-round"></Icon>
        晨检机设备
      </p>
      <Row type="flex" justify="space-between">
        <div>
          <div class="db_inline" v-if="loginType!=='kindergarten'">
            幼儿园：
            <Select v-model="searchparam.kindergartenId" style="width:140px" @on-change="queryFn">
              <Option v-for="item in kindergartenList" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </div>
          <div class="db_inline">
            创建日期：
            <DatePicker type="date" placeholder="开始时间" v-model="searchparam.bTime" @on-change="searchparam.bTime=$event"
                        style="width: 110px"></DatePicker>
            至
            <DatePicker type="date" placeholder="结束时间" v-model="searchparam.eTime" @on-change="searchparam.eTime=$event"
                        style="width: 110px"></DatePicker>
          </div>
          <div class="db_inline">
          <span @click="queryFn">
              			<Button type="info"><Icon type="search"></Icon>搜索</Button>
        			</span>
            <span @click="restFn">
              			<Button type="ghost"><Icon type="refresh"></Icon>刷新</Button>
        			</span>
          </div>
        </div>
        <div class="control">
          <Button @click="addFn" type="info" v-if="loginType==='platform'">
            <Icon type="plus-round"></Icon>
            <span>新增</span>
          </Button>
        </div>
      </Row>

      <Row class="margin-top-10">
        <Table :height='tableHeight' ref="backgroundTable" :columns="dataColumns" :data="dataTable"></Table>
      </Row>
      <Row type="flex" justify="end" class="footer">
        <div class="margin-top-10">
          <Page :total="searchparam.total" :current="searchparam.current" :page-size="searchparam.size"
                @on-change="pageChange" show-elevator></Page>
        </div>
      </Row>
    </Card>
    <Modal v-model="modal.visible" :title="modal.title" v-on:on-ok="submitFn" :mask-closable="false" width="540"
           v-on:on-cancel="cancelFn">
      <Form ref="Form" :model="modal.form" :label-width="100" :rules="modal.rules">
        <FormItem label="名称" prop="name">
          <Input v-model="modal.form.name" placeholder="请输入设备名" style="width:63%"/>
        </FormItem>
        <FormItem label="所在位置">
          <Input v-model="modal.form.location" placeholder="放置位置" style="width:63%"/>
        </FormItem>
        <FormItem label="mac地址" prop="mac">
          <Input v-model="modal.form.mac" placeholder="请输入mac地址" style="width:63%"/>
        </FormItem>
        <FormItem label="所属幼儿园" prop="kindergartenId" v-if="loginType==='platform'">
          <Select v-model="modal.form.kindergartenId" style="width:63%">
            <Option v-for="item in kindergartenList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancelFn">取消</Button>
        <Button type="primary" @click="submitFn" :loading="modal.loading">保存</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import API from "@/api/api";
  import VmBtable from "@/components/vm/vm-btable";
  import Cookie from "js-cookie"

  export default {
    name: "Background",
    components: {
      VmBtable,
    },
    data() {
      return {
        cutHeight: 280,
        tableHeight: 640,
        kindergartenList: [],
        loginType: Cookie.getJSON('loginType'),
        searchparam: {
          current: 1,
          size: 20,
          kindergartenId: '',
          bTime: '',
          eTime: '',
        },
        dataColumns: [{
          type: 'index',
          title: '序号',
          align: 'center',
          minWidth: 60
        },
          {
            title: '设备名',
            key: 'name',
            minWidth: 160,
            align: 'center'
          },
          {
            title: '所属学校',
            key: 'kindergartenName',
            minWidth: 160,
            align: 'center'
          },
          {
            title: '所在位置',
            key: 'location',
            minWidth: 160,
            align: 'center'
          },
          {
            title: 'mac地址',
            key: 'mac',
            minWidth: 160,
            align: 'center'
          },
          {
            title: '创建时间',
            key: 'createTime',
            minWidth: 150,
            align: 'center',
          },
          {
            title: '状态',
            key: 'status',
            minWidth: 150,
            align: 'center',
            render: (h, params) => {
              let color = 'orange';
              let str = '离线';
              if (params.row.status) {
                color = 'green';
                str = '在线'
              }
              return h('div', {style: {color: color}}, str);
            }
          },
          {
            title: '操作',
            align: 'center',
            minWidth: 160,
            render: (h, params) => {
              let btn = [];
              let detailBtn = h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.editFn(params.row)
                  }
                }
              }, '编辑');
              let unbindBtn = h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.unbindFn(params.row)
                  }
                }
              }, '解绑');
              btn.push(detailBtn, unbindBtn);
              return h('div', btn);
            }
          }
        ],
        modal: {
          title: '',
          visible: false,
          loading: false,
          form: {
            id: '',
            name: '',
            location: '',
            mac: '',
            kindergartenId: ''
          },
          rules: {
            'name': [{
              required: true,
              trigger: 'blur',
              message: '必填项'
            }], 'mac': [{
              required: true,
              trigger: 'blur',
              message: '必填项'
            }], 'kindergartenId': [{
              type: 'number',
              required: true,
              trigger: 'blur',
              message: '必填项'
            }],
          }
        },
        dataTable: [],
      }
    },
    methods: {
      addFn() {
        Object.assign(this.modal, {
          visible: true,
          title: '添加设备',
          loading: false,
          form: {}
        });
      },
      queryFn() {
        API.fetchTerminal(this.searchparam).then(resp => {
          this.dataTable = resp.data.records;
          this.searchparam.total = resp.data.total;
          this.searchparam.current = resp.data.current;
        })
      },
      pageChange(val) {
        this.searchparam.current = val;
        this.queryFn();
      },
      restFn() {
        this.searchparam.bTime = '';
        this.searchparam.eTime = '';
        this.searchparam.kindergartenId = '';
        this.searchparam.current = 1;
        this.queryFn();
      },
      unbindFn(device) {
        this.$Modal.confirm({
          title: '警告',
          content: '是否解除设备与幼儿园绑定？',
          onOk: () => {
            API.unbindTerminal(device.id).then(resp => {
              this.queryFn();
            })
          }
        })
      },
      fetchKindergarten() {
        API.fetchKindergartenList().then(resp => {
          this.kindergartenList = resp.data;
        })
      },
      editFn(device) {
        Object.assign(this.modal, {
          visible: true,
          title: '编辑设备',
          loading: false,
        });
        Object.assign(this.modal.form, device);
      },
      cancelFn() {
        Object.assign(this.modal, {
          visible: false,
          title: '编辑设备',
          loading: false,
          form: {}
        })
      },
      submitFn() {
        this.$refs.Form.validate(valid => {
          if (valid) {
            this.modal.loading = true;
            let data = Object.assign(this.modal.form);
            if (data.id) {
              API.updateTerminal(data).then(resp => {
                this.modal.loading = false;
                this.modal.visible = false;
                this.queryFn();
              })
            } else {
              API.createTerminal(data).then(res => {
                this.modal.loading = false;
                this.modal.visible = false;
                this.queryFn();
              }).catch(resp => {
                this.modal.loading = false;
              })
            }
          }
        })
      },
      setHeight() {
        this.tableHeight = window.innerHeight - this.$refs.backgroundTable.$el.offsetTop - this.cutHeight;
      }
    },
    mounted() {
      this.queryFn();
      this.setHeight();
      if (this.loginType !== 'kindergarten') {
        this.fetchKindergarten();
      }
    }
  }
</script>

<style scoped>

</style>
